<template>
    <div>
        <h1 class="text_h1">更换手机号后，下次可使用新手机号。
            <p>当前手机尾号后四位为：{{phone | capitalize4}}</p> </h1>
        <ul class="list">
             <li>
                <label>手机号</label><input type="text" placeholder="请输入手机号" v-model="tel">
            </li>
            <li>
                <label>验证码</label><input type="text" placeholder="请输入验证码" v-model="yanzengma"> <button  class="yanzm" id="btn_yanzm" :class="{'yanzm':canClick,'cant-click':cantClick}" @click="countDown">{{content}}</button>
            </li>
        </ul>
        <div class="shuoming" @click="VerificationTelHref">
            <p>无法验证手机号</p>
        </div>
        <button class="subtn" @click="subtn">提交</button>
    </div>
</template>
<script>
export default {
    data () {
        return {
            content:'获取验证码',//验证码
            canClick:true,//
            cantClick:false,
            totalTime:'60',
            yanzengma:'',
            tel:'',
            phone:""
        }
    },
    mounted(){
      this. loadaccoutinfo()
    },
    methods:{
        VerificationTelHref:function(){
           this.$router.push({name:'VerificationTel'})
        },
        subtn:function(){
           if(""==this.tel){
            layer.msg("手机号不能为空")
             return
           }
           if(""==this.content){
             layer.msg("验证码不能为空")
             return
           }
             this.$http.put(this.APIURL_PREFIX+"/api/wap/phone",$.param({phone:this.tel,checkcode:this.yanzengma})).then((response) => {  
                 if("验证码错误！"==response.data.msg){
                   layer.msg(response.data.msg)
                 }else{
                    layer.msg("修改成功")
                    this.$router.push({name:"accounts_security"})  
                 }
                
             }).catch(function (err) {
                console.log(err)
            });
        },
         countDown() {     //发送定时器
            if(this.tel){
                if (!this.canClick) return;
                this.canClick = false;
                this.cantClick = true;
                this.content = "重新发送（" + this.totalTime + "s）";
                this.apii();
                let clock = window.setInterval(() => {
                this.totalTime--;
                this.content = "重新发送（" + this.totalTime + "s）";
                if (this.totalTime < 0) {
                window.clearInterval(clock);
                this.content = "重新发送";
                this.totalTime = 60;
                this.canClick = true;
                }
                }, 1000);
            }else{
                    layer.msg("对不起请填写手机号")
                }
        },
        apii(){//获取验证码
            this.$http.get(this.APIURL_PREFIX+"/api/accounts/checkcode",{ params:{username:this.tel}}).then((response) => {               
            }).catch(function (err) {
                console.log(err)
            });
        },
          loadaccoutinfo: function(){//个人资料
            this.$http.get(this.APIURL_PREFIX+'/api/wap/accounts/info').then((response) => {
                this.phone=response.data.data.phone
            }).catch(function(err){
                console.log(err)
            }).then();
       },
    }
    
}
</script>

<style scoped>
.subtn{
    width: 90%;
    height: 40px;
    margin-top: 250px;
    background: red;
    color: white;
    font-weight: 500;
}
.shuoming{
    text-align: left;
    margin-left: 15px;
    padding: 15px 0;
    color: red;
}
.text_h1{
    font-size: 15px;
    text-align: left;
    margin-left: 15px;
    line-height: 50px;
}
.list{
    text-align: left;
}
.list li{
    border-bottom: 1px solid #e8e8e8;
    background: #ffffff;
}
.list li label{
    font-weight: 500;
    margin-right:15px; 
    margin-left: 15px;
}
.list li input{
    width: 247px;
    border: none;
    background: none;
    font-size: 13px;
}
.list li:nth-of-type(1) input{
    margin-left: 12px;
}
.list li:nth-of-type(2) {
    padding-top: 15px;
}
.list li:nth-of-type(2) input{
    margin-left: 12px;
    width: 133px;
}
.tishi{
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 18px;
}
.tishi span{
    float:right;
    color: red;
   text-decoration:underline
}
.text_top{
    width: 100%;
    height: 44px;
    font-size: 15px;
    text-align: left;
    box-sizing: border-box;
    padding: 15px;
}

#btn_yanzm{
 font-size: 14px;
}
.yanzm{
 border: 1px solid red;    
}
.cant-click{
  border: 1px solid blue;
}
.binding_Tel{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.5);
  position: fixed;
  top: 0%;
  z-index: 9999;
}
.yanz{
  height: 350px;
  background-color: #f2f2f2;
  margin: 30% auto;
  border-radius: 5px;
  padding: 30px 0;
}
.yanz h1{
  font-size: 15px;
  padding: 15px;
  font-weight: bold;
}
.tel,.tel_yzm{
 border-radius: 5px;
 box-sizing: border-box;
 border: 1px solid #dddddd;
 width: 80%;
 margin: 0 auto;
 text-align: left;
 height: 40px;
 margin: 15px auto;
}
.tel_yzm{
  width:49%;
  float: left;     
}
.tel img,.tel_yzm img{
  margin-left: 1px;
  vertical-align: middle;
  margin-left: 15px;
}
.tel input,.tel_yzm input{
  font-size: 14px;
  background-color: #f2f2f2;
  border: none;
  height:30px;
}
.tel_footer{
  width: 80%;
  margin: 0 auto;
  text-align: left;
  overflow: hidden;
  clear: both;
}
</style>
